<template lang="html">
  <div class="view" v-loading="loading">
      <div class="echarts_view_1">
          <div class="filter_view">
              <div class="tabs_view">定制收发</div>
              <div class="f_view">
                <div class="buttons">
                    <el-button size="small" @click="filter()" :class="[active==0?'active':'']" type="primary" plain>总计</el-button>
                    <el-button size="small" @click="filter(1)" :class="[active==1?'active':'']" type="primary" plain>最近7日</el-button>
                    <el-button size="small" @click="filter(2)" :class="[active==2?'active':'']" type="primary" plain>最近15日</el-button>
                    <el-button size="small" @click="filter(3)" :class="[active==3?'active':'']" type="primary" plain>最近30日</el-button>
                </div>
              </div>
          </div>

          <div class="content">

              <div class="swiper_container">
                   <ul class="swiper-wrapper">
                       <li class="swiper-slide" v-for="item in pieData" :key="item.typeName">
                          <div class="g_name">{{item.typeName}}</div>
                          <div class="g_cont">
                              <div class="g_num">
                                <p>返厂</p>
                                <span>{{item.repairCount}}</span>
                              </div>
                              <div class="ratio">
                                <myCircle :per-cent="isNaN(item.repairCount / item.totalCount)?0:(item.repairCount / item.totalCount).toFixed(2)" />
                                <p>占到货比</p>
                              </div>
                          </div>
                       </li>
                   </ul>
                   <div class="swiper-button-next"></div>
                   <div class="swiper-button-prev"></div>
              </div>

              <div class="e_chart_wrap" >
                <div class="e_chart" ref="echarts"></div>
                <i class="el-icon-more" @click="navigateTo(1)"></i>
              </div>

          </div>
      </div>

      <div class="echarts_view_1 echarts_view_2">
          <div class="filter_view">
              <div class="tabs_view">大货发货</div>
              <div class="f_view">
                <datePicker startEndTime @onFilter="onFilter" />
                <span>统计时间：{{statisTime}}</span>
              </div>
          </div>

          <div class="content">
            <div class="e_chart_wrap" >
              <div class="e_chart" ref="echarts2"></div>
            </div>
          </div>
      </div>

      <div class="echarts_view_1 echarts_view_3">
          <div class="filter_view">
              <div class="tabs_view">合验通过率</div>
              <div class="f_view">
                  <datePicker @onFilter="onFilter1" />
                  <span>统计时间：{{statisTime1}}</span>
              </div>
          </div>

          <div class="content">
            <div class="e_chart_wrap" >
              <div class="e_chart" ref="echarts3"></div>
              <i class="el-icon-more" @click="navigateTo(2)"></i>
            </div>
          </div>
      </div>


  </div>
</template>

<script>
export default {
  data(){
    return {
      loading:false,
      date: [],
      active: 0,
      statisTime: '',
      statisTime1: '',
      year: '',
      month: '',
      day: '',
      year1: '',
      month1: '',
      day1: '',
      pieData: [],
      echratsOptions: {
        title: {text: '定制收发走势图', textStyle: {fontSize:14,fontWeight:'normal'}},
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
        },
        legend: {
          bottom: 0,
          left: 'center',
          data: ['定制到货', '定制发货']
        },
        toolbox:{feature:{saveAsImage: {title:'下载'}},right:40},
        tooltip: {
            trigger: 'axis'
        },
        yAxis: {
            type: 'value'
        },
        series: [{
              name: '定制到货',
              data: [],
              type: 'line',
              smooth: true,
              itemStyle:{color:'#BBEA98'},
              lineStyle:{color:'#BBEA98'},
              areaStyle: {
                  color:{
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0, color: '#DFFBCD'
                      }, {
                          offset: 1, color: '#fff'
                      }],
                  }
              }
          },
          {
              name: '定制发货',
              data: [],
              type: 'line',
              smooth: true,
              itemStyle:{color:'#F4C985'},
              lineStyle:{color:'#F4C985'},
              areaStyle: {
                  color:{
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0, color: '#FFF6CD'
                      }, {
                          offset: 1, color: '#fff'
                      }],
                  }
              }
          }
        ]
      },
      echratsOptions2: {
          title: {text:'发货数量',textStyle: {fontSize:14,fontWeight:'normal'}},
          tooltip : {trigger: 'axis'},
          toolbox:{feature:{saveAsImage: {title:'下载'}},right:20},
          xAxis : [{data : []}],
          yAxis : [{type : 'value'}],
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          series : [
            {
              type:'bar',
              barWidth: '40%',
              itemStyle: {
                  color: new this.$chart.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                          {offset: 0, color: '#83bff6'},
                          {offset: 1, color: '#188df0'}
                      ]
                  )
              },
              data:[]
          }]
      },
      echratsOptions3:{
        title: {text: '合验通过率分析', textStyle: {fontSize:14,fontWeight:'normal'}},
        toolbox:{feature:{saveAsImage: {title:'下载'}},right:40},
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
        },
        legend: {
          bottom: 0,
          left: 'center',
          data: ['合验通过', '合验未通过', '未合验']
        },
        series: [
            {
                type: 'pie',
                color: ['#18E265','#558EEF','#F03466'],
                data: [
                    {value: 70, name: '合验通过'},
                    {value: 20, name: '合验未通过'},
                    {value: 10, name: '未合验'},
                ]
            }
        ]
      },

    }
  },

  async created(){
    await this.pieChart();
    await this.barChart();
    await this.pie2Chart();

    this.initEcharts();
  },
  methods:{
    async pieChart(){
      this.loading = true;
      let res = await this.$http.selectDataStatsReceivePie({
        selectType: this.active == 0 ? '' : this.active,
      })
      this.loading = false;
      if(res.data.code == 0){
        this.pieData = res.data.data.pie;
        this.echratsOptions.xAxis.data = [];
        this.echratsOptions.series[0].data = [];
        this.echratsOptions.series[1].data = [];
        res.data.data.receiveLine.forEach(item=>{
          this.echratsOptions.xAxis.data.push(item.date);
          this.echratsOptions.series[0].data.push(item.reworkCount);
          this.echratsOptions.series[1].data.push(item.deliveryCount);
        })
      }
      this.generateSwiper()
    },

    async barChart(){
      this.loading = true;
      let res = await this.$http.selectDataStatsReceiveColumn({
        dayTime: this.day,
        monthTime: this.month,
        yearTime: this.year,
        startTime: (this.date&&this.date[0]) || '',
        endTime: (this.date&&this.date[1]) || '',
      })
      this.loading = false;
      if(res.data.code == 0){
        this.echratsOptions2.xAxis[0].data = [];
        this.echratsOptions2.series[0].data = [];
        res.data.data.forEach(item=>{
          this.echratsOptions2.xAxis[0].data.push(item.styleName)
          this.echratsOptions2.series[0].data.push(item.count)
        });
      }
    },

    async pie2Chart(){
      this.loading = true;
      let res = await this.$http.selectDataStatsHyPie({
        dayTime: this.day1,
        monthTime: this.month1,
        yearTime: this.year1,
      })
      this.loading = false;
      if(res.data.code == 0){
        this.echratsOptions3.series[0].data[0].value = res.data.data.adpotHyCount;
        this.echratsOptions3.series[0].data[1].value = res.data.data.noHyCount;
        this.echratsOptions3.series[0].data[2].value = res.data.data.waitHyCount;
      }
    },

    async onFilter(e){
      this.statisTime = e.val;
      this.date = [];
      this.year = '';
      this.month = '';
      this.day = '';
      switch (e.key) {
        case 1: this.day = e.val; break;
        case 2: this.month = e.val; break;
        case 3: this.year = e.val; break;
        case 4:
          this.date = [...e.val];
          if(e.val[0]) this.statisTime = `${e.val[0]} - ${e.val[1]}`;
          else this.statisTime = '';
        break;
      }
      await this.barChart();
      this.initEcharts();
    },
    async onFilter1(e){
      this.statisTime1 = e.val;
      this.year1 = '';
      this.month1 = '';
      this.day1 = '';
      switch (e.key) {
        case 1: this.day1 = e.val; break;
        case 2: this.month1 = e.val; break;
        case 3: this.year1 = e.val; break;
      }
      await this.pie2Chart();
      this.initEcharts();
    },
    filter(n){
      if(n){
        this.active = n;
      }else{
        this.active = 0;
      }
      this.pieChart();
      this.initEcharts();
    },

    generateSwiper(){
      this.$swiper('.swiper_container',{
        slidesPerView: 'auto',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      })
    },

    initEcharts(){
      var echarts = this.$chart.init(this.$refs['echarts']);
      var echarts2 = this.$chart.init(this.$refs['echarts2']);
      var echarts3 = this.$chart.init(this.$refs['echarts3']);
      echarts.clear();
      echarts2.clear();
      echarts3.clear();
      echarts.setOption(this.echratsOptions,true);
      echarts2.setOption(this.echratsOptions2,true);
      echarts3.setOption(this.echratsOptions3,true);
    },
    navigateTo(n){
      switch (n) {
        case 1:
          this.$router.push({path: '/statistics/send_statistics/send_statistics_detail', query: {}});
          break;
        case 2:
          this.$router.push({path: '/statistics/send_statistics/check_statistics', query: {}});
          break;
      }
    },


  }


}
</script>

<style lang="css" scoped>
.active{
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
}
.view {
  display: flex;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  flex-wrap: wrap;
}

.swiper_container{
  overflow: hidden;
  position: relative;
}

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{
  font-size: 24px;
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{
  font-size: 24px;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
  right: 0;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
  left: 0;
}
.swiper_container ul{
  display: flex;
}
.swiper_container li{
  padding: 20px 30px;
  width: auto;
  box-sizing: border-box;
}
.g_name{
  font-size: 14px;
  color: #333;
  text-align: center;
}
.g_cont{
  display: flex;
  align-items: center;
}
.g_cont .g_num {
  margin-right: 20px;
}
.g_cont .g_num p{
  font-size: 12px;
  color: #999;
  line-height: 30px;
}
.g_cont .g_num span{
  font-size: 18px;
  color: #333;
}
.g_cont .ratio{
  text-align: center;
  padding-top: 20px;
}
.g_cont .ratio p{
  font-size: 12px;
  color: #999;
  line-height: 25px;
}
.echarts_view_1{
  padding: 12px;
  background: #fff;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}
.echarts_view_1 .filter_view{
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid #F6F6F6;
}
.echarts_view_1 .f_view{
  display: flex;
  align-items: center;
}
.f_view span{
  font-size: 14px;
  color: #656565
}
.echarts_view_1 .buttons{
  margin-left: 20px;
}
.echarts_view_1 .content{
  width: 100%;
  min-width: auto
}
.echarts_view_1 .content .e_chart_wrap{
  width: 100%;
  height: 400px;
  position: relative;
  padding: 30px 20px 0;
  box-sizing: border-box;
}
.echarts_view_1 .content .e_chart_wrap2{
  width: 30%;
  height: 400px;
  position: relative;
  padding-top: 30px;
}
.echarts_view_1 .content .e_chart{
  width: 100%;
  height: 100%;
}
.echarts_view_1 .content .e_chart_wrap .el-icon-more{
  position: absolute;
  right: 40px;
  top: 35px;
  cursor: pointer;
}
.echarts_view_1 .content .e_chart_wrap .el-icon-more:hover{
  color: #4196FF
}
.echarts_view_1 .content .ranks{
  width: 28%;
  padding-right: 20px;
  max-width: 350px;
}
.tabs_view{
  line-height: 32px;
  padding-bottom: 10px;
}
.echarts_view_2{
  width: 66%;
}
.echarts_view_3{
  width: 33%;
}
</style>
